<template>
	<div class="show">
		<!-- 数据展示区域 -->
		<div class="wrapper">
			<el-table
				:cell-style="rowStyle"
				:data="tableData.filter(data => !search || data.patient.toLowerCase().includes(search.toLowerCase()))"
				style="width: 100%">
				<el-table-column type="index" width="50" align="center">
				</el-table-column>
				<el-table-column label="挂号时间" prop="regTime" align="center">
				</el-table-column>
				<el-table-column label="就诊时间" prop="clinicTime" align="center">
				</el-table-column>
				<el-table-column label="姓名" width="100" prop="patient" align="center">
				</el-table-column>
				<el-table-column label="身份证号" prop="idCard" align="center">
				</el-table-column>
				<el-table-column label="科室" width="100" prop="dept" align="center">
				</el-table-column>
				<el-table-column label="医生" width="100" prop="doctor" align="center">
				</el-table-column>
				<el-table-column label="就诊状态" width="100" prop="status" align="center">
				</el-table-column>
				<el-table-column align="right">
					<template slot="header" slot-scope="scope">
						<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
					</template>
					<template slot-scope="scope">
						<el-button v-if="tableData[scope.$index].status=='已挂号'||tableData[scope.$index].status=='待就诊'" 
						size="mini" 
						type="warning" 
						@click="cancelEdit(scope.$index, scope.row)">取消挂号
						</el-button>
						<el-button v-else size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除挂号
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!-- 分页区域 -->
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[8,12,16]" :page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="page.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				tableData: [],
				search: '',
				page: {
					currentPage: 1,
					total: 0,
					pageSize: 8,
				},
				status:['已过时','已挂号','待就诊','已完成就诊','已取消'],
				timeQuantum:['','8:00-9:00','9:00-10:00','10:00-11:00','11:00-12:00','13:00-14:00','14:00-15:00','15:00-16:00','16:00-17:00']
			}
		},
		methods: {
			handleDelete(index, row) {
				this.$confirm('删除此条挂号信息, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$axios.delete("http://localhost:8080/registereds/delete/"+this.tableData[index].id)
				  .then(()=>{
				  	this.$message({
				  	  type: 'success',
				  	  message: '删除成功!'
				  	});
				  	this.show();
				  })
				}).catch(() => {       
				});
			},
			cancelEdit(index, row) {
				this.$confirm('取消挂号, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post("http://localhost:8080/registereds/update", {
						id: this.tableData[index].id,
						status: 4,
					}).then(() => {
						this.$message({
							type: 'success',
							message: '取消成功!'
						});
						this.show();
					})
				}).catch(() => {});
			},
			handleSizeChange(val) {
				this.page.pageSize = val;
				this.show();
			},
			handleCurrentChange(val) {
				this.page.currentPage = val;
				this.show();
			},
			show(){
				this.$axios.get("http://localhost:8080/registereds/findRegisteredDetailed/"+ this.page.currentPage + "/" + this.page.pageSize)
				.then((res)=>{
					this.page.total = res.data.data.total;
					this.tableData = res.data.data.list;
					for (var i = 0;i < res.data.data.list.length; i++) {
						this.tableData[i].idCard = res.data.data.list[i].patient.idCard;
						this.tableData[i].patient = res.data.data.list[i].patient.name;
						this.tableData[i].dept = res.data.data.list[i].dept.name;
						this.tableData[i].doctor = res.data.data.list[i].doctor.name;
						this.tableData[i].status = this.status[res.data.data.list[i].status];
						this.tableData[i].clinicTime += ' '+this.timeQuantum[res.data.data.list[i].timeQuantum];
					}
				})
			},
			rowStyle() {
			    return "text-align:center";
			},
		},
		created(){
			this.$axios.get("http://localhost:8080/registereds/overdue").then(()=>{
				this.show();
			})
		}
	}
</script>
<style lang="less" scoped>
	.show {
		margin: 20px;
	}

	.header {
		display: flex;

		button {
			margin-left: 20px;
		}
	}

	.wrapper {
		margin: 20px;
	}
</style>
